<template>
  <div id="login">
    <el-container>
      <el-aside width="200px"></el-aside>
      <el-main>
        <div class="box">
          <div class="top">
            <h1>CUSTOMER LOGIN</h1>
          </div>
          <div class="down">
            <el-form
              ref="loginForm"
              label-position="right"
              label-width="80px"
              :model="user"
            >
              <el-form-item label="用户名">
                <el-input v-model="user.username"></el-input>
              </el-form-item>
              <el-form-item label="密码">
                <el-input
                  v-model="user.password"
                  type="password"
                  show-password
                ></el-input>
              </el-form-item>

              <div class="forget">
                <button @click="find()">忘记密码</button>
              </div>

              <el-form-item>
                <el-button type="primary" @click="myLogin()">登录</el-button>
                <el-button @click="reguser()">注册</el-button>
              </el-form-item>
            </el-form>
          </div>

          <!-- 找回密码 -->
          <el-dialog
            title="验证信息"
            :visible.sync="dialogFormVisiblePerson"
            width="450px"
          >
            <el-form :model="person">
              <el-form-item label="请输入用户名" label-width="120px">
                <el-input v-model="person.name"></el-input>
              </el-form-item>
              <el-form-item label="请输入电话号码" label-width="120px">
                <el-input v-model="person.tel"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisiblePerson = false"
                >取 消</el-button
              >
              <el-button type="primary" @click="findPassword(person)"
                >确 定</el-button
              >
            </div>
          </el-dialog>

          <!-- 用户注册 -->
          <el-dialog
            title="用户注册"
            :visible.sync="dialogFormVisiblePerson2"
            width="450px"
          >
            <el-form :model="reguserData">
              <el-form-item label="请输入用户名" label-width="120px">
                <el-input v-model="reguserData.name"></el-input>
              </el-form-item>
              <el-form-item label="请输入密码" label-width="120px">
                <el-input v-model="reguserData.pwd" type="password"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisiblePerson2 = false"
                >取 消</el-button
              >
              <el-button type="primary" @click="reguserPerson(reguserData)"
                >注 册</el-button
              >
            </div>
          </el-dialog>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
  
  <script>
export default {
  name: 'Login',
  data () {
    return {
      dialogFormVisiblePerson: false,
      dialogFormVisiblePerson2: false,
      user: {
        username: '',
        password: ''
      },
      person: {
        name: '',
        tel: ''
      },
      reguserData: {
        name: '',
        pwd: ''
      }
    }
  },
  methods: {
    // 登录验证
    myLogin () {
      this.$http({
        method: 'POST',
        url: '/lk/lk/login',
        data: {
          username: this.user.username,
          password: this.user.password
        }
      }).then(res => {
        console.log(res);
        if (res.data.status == 0) {
          sessionStorage.setItem('user', JSON.stringify(this.user))
          this.$message({
            message: '登陆成功',
            type: 'success'
          })
          this.$router.push('/Main')
        } else {
          this.$message({
            message: '账号或密码错误，请重新输入',
            type: 'info'
          })
          // alert('账号或密码错误，请重新输入')
          this.user.username = ''
          this.user.password = ''
        }
      })
    },
    // 注册
    reguser () {
      this.dialogFormVisiblePerson2 = true
    },
    reguserPerson (form) {
      const that = this
      this.$http({
        method: 'POST',
        url: '/lk/lk/reguser',
        data: {
          username: form.name,
          password: form.pwd
        }
      }).then(function (response) {
        that.$message({
            message: response.data.message,
            type: 'info'
          })
      })
    }
  }
}
  </script>
  
<style lang="less">
html,
body,
#login {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  #login {
    width: 100%;
    .el-container {
      height: 100%;
      .el-aside {
        background-image: url(../assets/登录1.jpg);
        background-size: cover;
        background-position: 50%;
      }
      .el-main {
        background-color: rgb(28, 24, 24);
        .box {
          width: 500px;
          height: 300px;
          margin: 200px auto;
          border-radius: 20px;
          background-color: rgb(169, 164, 164);
          .top {
            width: 100%;
            height: 50px;
            text-align: center;
            line-height: 50px;
          }
          .down {
            width: 100%;
            margin-top: 40px;
            .el-form {
              .forget {
                text-align: right;
                font-size: 14px;
                button {
                  border: 0;
                  background-color: rgb(169, 164, 164);
                }
                button:hover {
                  color: gainsboro;
                }
              }
              .el-form-item {
                .el-input {
                  width: 300px;
                }
                .el-button {
                  margin-left: 50px;
                }
              }
            }
          }
          .el-dialog {
            .el-input {
              width: 200px;
            }
          }
        }
      }
    }
  }
}
</style>